<template>
  <view class="flex-column flex-center no-data-box padding-bottom-220" :style="{ position, top }">
    <image :src="`/static/no-data/no-${type}.png`" class="no-data block" />
    <text class="text-28 color-t2">{{ text || textDefault[type] }}</text>
  </view>
</template>

<script setup lang="ts">
type TNodataType = 'data' | 'network' | 'serve' | 'top-up'
type TPosition = 'absolute' | 'fixed' | 'relative' | 'sticky'
interface IProps{
  top?: string
  text?: string
  position: TPosition
  type: TNodataType,
}
withDefaults(defineProps<IProps>(), {
  type: 'data',
  position: 'fixed'
})

const textDefault = {
  data: '暂时没有数据啦~',
  network: '没有网络啦~',
  serve: '服务器错误，请重新加载~',
  'top-up': '暂无充值明细'
}
</script>

<style scoped lang="scss">
@include setPadding(bottom, 220);

.no-data-box{
  @include position(fixed, 0, 0, 0, 0, 5);

  .no-data{
    width: 480rpx;
    height: 480rpx;
    margin-bottom: 70rpx;
  }

}
</style>
